<template>
  <div id="plan-view" @dblclick="dblclick($event)">
    <img :src="props.configuration.imgUrl" alt="" draggable="false" />
    <div
      @dblclick.stop
      @contextmenu.prevent="isRemove(item, index)"
      v-for="(item, index) in props.data"
      :key="index"
      class="plan-view-item-list"
      :style="styleXY(item)"
    >
      <div class="plan-view-item" @click.stop="isShow(item, index)"></div>
      <div
        :class="
          'plan-view-item-content' +
          (currentShowIndex == index ? ' currentShowIndex' : ' orderShow')
        "
        @click.stop="currentShowIndex = index"
        v-show="showList.includes(index) && props.configuration.contentShow"
        :style="contentPosition(item)"
      >
        <span @click.stop="isHidden(index)">x</span>
        <slot name="content" :item="item"></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="plan-view">
import { time } from "console";
import { ref, onMounted, reactive, watch } from "vue";
const props = defineProps({
  configuration: {
    type: Object,
    required: true,
  },
  data: {
    type: Array,
    required: true,
  },
});
// 数据类型
type TPlanView = {
  content?: any;
  x: number | string;
  y: number | string;
};
// 获取内容
let currentShowIndex = ref(0);
const width = props.configuration.width;
const height = props.configuration.height;
const emit = defineEmits(["dblclick", "rigthRemoveClick"]);
// 位置
type anyContent = {
  x: number;
  y: number;
};
// 展示和隐藏
let showList = reactive<number[]>([]);
let dom = reactive({ x: 0, y: 0 });
// 获取渲染的节点高度和宽度
onMounted(() => {
  dom.x = document.getElementById("plan-view")?.offsetWidth ?? 0;
  dom.y = document.getElementById("plan-view")?.offsetHeight ?? 0;
});
const xAndy = ref({ x: 0, y: 0 });
// const data = ref<anyContent[]>([]);

// 双击创建
const dblclick = (event: any) => {
  if (dom.x !== 0) {
    xAndy.value.y = event.offsetY / dom.y;
    xAndy.value.x = event.offsetX / dom.x;
  } else {
    return console.error("高度");
  }
  emit("dblclick", xAndy);
};
// 隐藏内容框
const isShow = (item: any, index: number) => {
  if (!showList.includes(index)) {
    showList.push(index);
    currentShowIndex.value = index;
  } else {
    isHidden(index);
  }
};
// 删除事件
const isRemove = (item: any, index: number) => {
  // data.value.splice(index, 1);
  emit("rigthRemoveClick", item, index);
};
// 渲染位置
const styleXY = (item: any) => {
  return `left:${item.x * dom.x - 13}px;top:${item.y * dom.y - 13}px;`;
};
const contentPosition = (item: any) => {
  let left = 0;
  let top = 0;
  if (dom.y - item.y * dom.y < height) {
    top = -height - 45;
  } else {
    top = 0;
  }
  if (dom.x - dom.x * item.x < width / 2) {
    left = 0 - width;
  }
  if (dom.x * item.x < width / 2) {
    left = 15;
  }
  return `left:${left}px;top:${top}px;`;
};
// 隐藏
const isHidden = (index: number) => {
  let Findex = showList.indexOf(index);
  if (Findex == -1) return;
  showList.splice(Findex, 1);
};
// 暴露方法和数学
defineExpose({ isHidden, isShow, isRemove, dblclick });
</script>

<style scoped>
#plan-view {
  position: relative;
  z-index: 99;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.plan-view-item-list {
  position: absolute;
}
.plan-view-item {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: v-bind("props.configuration.titleBackground");
  z-index: 999;
  text-align: center;
  cursor: pointer;
}
.plan-view-item-content {
  width: v-bind(width + "px");
  height: v-bind(height + "px");
  position: relative;
  /* left: v-bind(-width/2 + 10 + "px"); */
  box-shadow: rgb(139 139 139) 3px 2px 7px 1px;
  margin-top: 5px;
  background: v-bind("props.configuration.background");
  overflow: hidden;
  border-radius: 5px;
  padding: 10px 5px 5px;
}
.plan-view-item-content span {
  position: absolute;
  top: -8px;
  right: 0px;
  padding: 5px;
  cursor: pointer;
}
.currentShowIndex {
  z-index: 999;
}
.orderShow {
  z-index: 99;
}
</style>
